<!-- 租户成员 -->
<template>
  <div>
    <!-- :rowSelection="rowSelection" -->
    <BasicTable @register="registerTable" >
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 自定义新增</a-button>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleInviteUser"> 邀请成员</a-button>
        <a-button type="primary" preIcon="ant-design:edit-outlined" @click="handleOpenInviteLinkList"> 邀请记录</a-button>
        
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <UserForm @register="registerInputForm" @success="handleAddSuccess" />
    <UserDetails @register="registerDetail"/>
    <SelectUserJoin @register="registerAddUserModal" @select="submitSelectedUser" />
    <InviteUserList @register="registerInviteLinkList" />
    <UserPassword @register="registerPassword" />
  </div>
</template>

<script lang="ts" name="tenant-member" setup>
  import { ref, computed, unref } from "vue"
  import { BasicTable, TableAction, ActionItem } from "/@/components/Table"
  import { Auth } from "/@/enums/authEnum"
  import UserForm from "./components/UserForm.vue"
  import UserDetails from "./components/UserDetails.vue"
  import SelectUserJoin from "./components/SelectUserJoin.vue"
  import InviteUserList from "./components/InviteUserList.vue"
  import UserPassword from "./components/UserPasswordModal.vue"
  import { useDrawer } from "/@/components/Drawer"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useModal } from "/@/components/Modal"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { columns, searchFormSchema } from "./data"
  import * as tenantUserApi  from "/@/api/iam/tenantUser"
  import { useGo } from "/@/hooks/web/usePage"
  import { Icon } from "/@/components/Icon"
  import { AvailableEnum } from '/@/enums'
  
  // import { usePermission } from '/@/hooks/web/usePermission'
  // const { hasPermission } = usePermission();

  const [registerPassword, { openModal: openPassword }] = useModal()
  const go = useGo()
  const { createMessage, createConfirm } = useMessage()
  const [registerInputForm, { openDrawer: openInputForm }] = useDrawer()
  const [registerDetail, { openDrawer: openDetail }] = useDrawer()
  const [registerAddUserModal, { openModal: openAddUserModal }] = useModal()
  const [registerInviteLinkList, { openModal: openInviteLinkList }] = useModal()

  const { prefixCls, tableContext } = useListPage({
    designScope: "user-list",
    tableProps: {
      title: "用户列表",
      api: tenantUserApi.pageTenantUser,
      bordered: false,
      columns: columns,
      size: "small",
      formConfig: {
        labelWidth: 70,
        schemas: searchFormSchema,
      },
      actionColumn: {
        width: 210,
        title: "操作",
        dataIndex: "action",
        fixed: "right",
        slots: { customRender: "action" },
      },
      beforeFetch: (params) => {
        return Object.assign({ column: "createTime", order: "desc" }, params)
      },
    }
  })

  const [registerTable, { reload, updateTableDataRecord }] = tableContext

  const handleAdd = () => {
    openInputForm(true, {
      isUpdate: false
    })
  }
  const handleInviteUser = () => openAddUserModal(true, { inviteWay: "fromLink", selectPlatformUser: true })
  const handleOpenInviteLinkList = () => openInviteLinkList(true, {})

  const submitSelectedUser = async (selectRows) => {
    const userIds = selectRows.map((e) => e.userId)
    console.log("selectRows", selectRows)

    await tenantUserApi.saveUser({ userIds })
    createMessage.success("添加成功")
    reload()
  }

  async function handleEdit(record: Recordable) {
    go('/user/detail/' + record.userId)
  }


  function handleOpenUpdatePassword(record) {
    openPassword(true, { record })
  }

  async function handleDelete(record) {
    createConfirm({
      title: "危险操作",
      content: `确定要删除 ${record.userName} 用户吗？此操作不可逆数据`,
      iconType: "warning",
      onOk: () => tenantUserApi.deleteTenantUser({ id: record.id }, reload)
    })
  }

  async function handleAddSuccess({ values }) {
    await reload()
    createMessage.success("添加成功")
  }

  function getTableAction(record): ActionItem[] {
    return [
      {
        label: "编辑",
        onClick: handleEdit.bind(null, record),
        // ifShow: () => record.canOperate,
      },
      {
        label: "移除",
        // ifShow: () => record.canOperate,
        color: "error",
        popConfirm: {
          title: "是否确认移除",
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: "停用",
        color: "error",
        ifShow: record.status == AvailableEnum.NORMAL,
        // auth: 'sys:area:updateStatus',
        popConfirm: {
          title: "确定停用吗?",
          confirm: handleUpdateStatus.bind(null, record, AvailableEnum.DISABLE),
        },
      },
      {
        label: "启用",
        ifShow: record.status == AvailableEnum.DISABLE,
        popConfirm: {
          title: "确定启用吗?",
          confirm: handleUpdateStatus.bind(null, record, AvailableEnum.NORMAL),
        },
      }
    ]
  }

  
  const handleUpdateStatus = async (record, status) => {
    await tenantUserApi.updateStatus({ id: record.id, status })
    createMessage.success("更新成功")
    await reload()
  }


  function getDropDownAction(record): ActionItem[] {
    return [
      {
        label: "重置密码",
        onClick: handleOpenUpdatePassword.bind(null, record),
      },
    ]
  }


</script>

<style scoped></style>
